<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue'
import router from './router/index'
import { ref } from 'vue';
import TsComponent from './components/TsComponent.vue';

// const router = useRoute()
const count = ref(12);

function goto(path: string) {
    router.push(path)
}
</script>

<template>
    <TsComponent :tourist="{
        value: '500',
        unit: '人'
    }"></TsComponent>
    <ul>
        <li @click="goto('/')">
            Home
        </li>
        <li @click="goto('/hello')">
            HelloWorld
        </li>
    </ul>
    <router-view></router-view>
    <!-- <HelloWorld msg="Vite + Vue" /> -->
</template>

<style scoped>
ul {
    display: flex;
    width: 80%;
}

li {
    list-style: none;
    display: flex;
    height: 40px;
    width: 150px;
    border: 1px solid #ccc;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

li:hover {
    background: #f1f1f1;
}

li:first-child {
    margin-right: 10px;
}
</style>
